Vue Fes Japan 2025 LY スポンサーブースクイズ
https://scrapbox.io/files/690c7121d24342bd33d2ecfc.png
Q1 次のうち、computed と watch の違いとして正しいものを選んでください
1. computed は計算結果をキャッシュするが、watch はキャッシュしない
2. watch は常に同期的に実行される
3. computed は副作用を許容するが、watch は許容されない
4. 両者は全く同じ挙動で置き換え可能
ナイトウ.iconの回答: 1
1. 正しい
2. 「常に」同期的が誤りっぽそう
3. computed も副作用を許容しない
4. 1. が正しい時点で不可能
Q2. count をインクリメントした時にリアクティブな変更になるものを選んでください
code:ts
// 1.
const state = reactive({ count: 0 });
let { count } = state;
count++;
code:ts
// 2.
const state = reactive({ nested: { count: 1 } });
const { nested } = state;
nested.count++;
code:ts
// 3.
const state = reactive({ count: 0 });
const { count } = toRefs(state);
count.value++;
code:ts
// 4.
const number = ref(1);
const state = { count: number.value * 2 };
state.count++;
code:ts
const state = { nested: reactive({ count: 1 }) };
state.nested.count++;
ナイトウ.iconの回答: 2, 3
1. reactive を分割代入するとリアクティビティが失われる
2. 分割代入してもオブジェクトなので問題ない
3. toRefs() って言っているしいけそう
4. count 自体は何もリアクティブな変数ではない
5. state 自体は何もリアクティブな変数ではない
Q3 次の 1〜5 の実装のうち Vue 公式で推奨されていないものを選んでください
code:vue
<script setup>
import { ref, computed } from "vue";
const fruits = ref([
{ id: 1, name: "Orange", inStock: false },
{ id: 2, name: "Banana", inStock: true },
{ id: 3, name: "Apple", inStock: true },
]);
const stockedFruits = computed(() => fruits.value.filter(fruit => fruit.instock)); // 4 用
const sortedFruits = computed(() => fruits.value.sort((a, b) => a.name - b.name)); // 5 用
</script>
<template>
<!-- 1. -->
<label v-for="fruit in fruits">
<input type="checkbox" />{{ fruit.name }}
</label>
<!-- 2. -->
<ul>
<li v-for="fruit in fruits" v-if="fruit.inStock">{{ fruit.name }}</li>
</ul>
<!-- 3. -->
<ul>
<li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>
<!-- 4. -->
<ul>
<li v-for="fruit in stockedFruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>
<!-- 5. -->
<ul>
<li v-for="fruit in sortedFruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>
</template>
ナイトウ.iconの回答: 1, 2, 5
1. key 属性ない
2. key 属性ない、v-for と v-if が同じ要素にある(どっちが優先されるかはわかってない)
3. ええやん
4. ええやん
5. computed() 内で副作用あり
Q4 次のコンポーネントをマウントしてボタンを 1 回クリックした時、コンソールには何が出力されるでしょう
code:vue
<script setup>
import { ref, onMounted, onUpdated } from "vue";
import Child from "./Child.vue";
const score = ref(0);
onUpdated(() => {
console.log("Parent onUpdated");
});
onMounted(() => {
score.value++;
});
const someOperation = () => {/** some */};
const increment = async () => {
score.value++;
someOperation();
score.value++;
await Promise.resolve();
score.value++;
};
</script>
<template>
<div>
<p>Score: {{ score }}</p>
<button @click="increment">score up</button>
<Child label="Child" />
<Child :label="score.toString()" />
</div>
</template>
Child.vue
code:vue
<script setup>
import { onUpdated } from "vue";
const { label } = defineProps({ label: String });
onUpdated(() => {
console.log("Child onUpdated");
});
</script>
<template>
<p>{{ label }}</p>
</template>
Q5 次のコードをブラウザでレンダリングしたとき、どの順番でログが出力されるでしょう
code:vue
<script setup>
import { nextTick, onMounted } from "vue";
import Child from "./Child.vue";
console.log("A");
onMounted(() => {
console.log("B");
nextTick(() => {
console.log("C");
});
setTimeout(() => {
console.log("D");
});
Promise.resolve().then(() => {
console.log("E");
});
});
</script>
<template>
<Child />
</template>
Child.vue
code:vue
<script setup>
import { onMounted } from "vue";
onMounted(() => {
console.log("F");
});
</script>
<template>
<p>Child</p>
</template>